<template>
  <div class='container'>
    <el-card class="box-card">
      <el-form ref="subjectListRef"
               :model="subjectForm"
               label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="关键字"
                          size="small">
              <el-input v-model="queryInfo.keyword"
                        placeholder="根据编号搜索"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  :offset="13">
            <el-button @click="SetFormInfo">清除</el-button>
            <el-button type="primary" @click="getSubjectFormInfo">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
        <el-alert
          type="info"
          :closable="false"
          show-icon>
          <template slot="title">
            共有{{this.queryInfo.counts}}条数据
          </template>
        </el-alert>
      <el-table :data="tableData"
                style="width: 100%">
        <el-table-column prop="id"
                         align="center"
                         label="编号"
                         width="180">
        </el-table-column>
        <el-table-column prop="questionType"
                         align="center"
                         label="题型"
                         width="180">

          <template slot-scope="scope">
             <el-tag v-if="scope.row.questionType === '1'" effect="dark" type='success'>
                    单选
              </el-tag>
              <el-tag v-else-if="scope.row.questionType === '2'" effect="dark" type='warning'>
                    多选
              </el-tag>
              <el-tag v-else effect="dark">
                    简答
              </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="questionIDs"
                         align="center"
                         label="题目编号">
          <template slot-scope="{row}">
            <span v-for="(item,index) in row.questionIDs"
                  :key="index">
             <el-link type="primary" :underline="false"> {{item.number}}</el-link>
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="addTime"
                         align="center"
                         label="录入时间">
        </el-table-column>
        <el-table-column prop="totalSeconds"
                         align="center"
                         label="答题时间(s)">
        </el-table-column>
        <el-table-column prop="accuracyRate"
                         align="center"
                         label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName"
                         align="center"
                         label="录入人">
        </el-table-column>
        <el-table-column prop="address"
                         align="center"
                         label="操作">
              <template slot-scope="scope">
              <el-button type="danger" @click="deletInfo(scope.row)" icon="el-icon-delete" circle></el-button>
              </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
       <el-pagination class="pager"
                       background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="queryInfo.page"
                       :page-sizes="[5,10,15,20]"
                       :page-size="queryInfo.pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="queryInfo.counts">
        </el-pagination>
      <!-- /分页 -->
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
export default {
  data() {
    return {
      queryInfo: {
        page: 1,
        pagesize: 5,
        counts: 0,
        keyword: ''
      },
      subjectForm: {},
      tableData: [],
      questionIDs: {}
    }
  },
  created() {
    this.getSubjectFormInfo()
  },
  methods: {
    async getSubjectFormInfo() {
      const { data } = await randoms(this.queryInfo)
      this.tableData = data.items
      this.queryInfo.counts = data.counts
      console.log(data)
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getSubjectFormInfo()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getSubjectFormInfo()
    },
    SetFormInfo() {
      this.queryInfo.keyword = null
      this.getSubjectFormInfo()
    },
    async deletInfo(row) {
      try {
        await this.$confirm('此操作将永久删除该条数据,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await removeRandoms({ id: row.id })
        this.$message.success('删除成功')
        if (this.tableData.length === 1 && this.queryInfo.page !== 1) {
          this.queryInfo.page--
        }
      } catch (err) {
        this.$message.error('删除失败')
      }
      this.getSubjectFormInfo()
    }
  }
}
</script>

<style scoped lang='less'></style>
